<template>
  <div class="flx">
    <Card style="width: 100%;">
      <Tabs value="name1" v-model="tabName" @on-click="tabsOnClick">
        <TabPane label="角色组列表" name="name1">
          <Row>
            <Form inline>
              <FormItem>
                <Input v-model="selectObj.name" clearable placeholder="名称"/>
              </FormItem>
              <FormItem>
                <Input v-model="selectObj.enname" clearable placeholder="英文名称"/>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="init()">搜索</Button>
              </FormItem>
            </Form>
          </Row>
          <Table border :loading="tableLoading" :columns="columns" :data="data">
            <template slot-scope="{ row }" slot="action">
              <Button type="primary" size="small" style="margin-right: 5px" @click="editRoleGroup(row)">编辑</Button>
              <Button type="error" size="small" @click="delRoleGroup(row)">删除</Button>
<!--              <Button type="warning" size="small">作废</Button>-->
            </template>
          </Table>
          <div class="page">
            <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize"
                  @on-change="change"/>
          </div>
        </TabPane>
        <template v-if="type === '1'">
          <TabPane label="角色组添加" name="name2">
            <div class="user-form">
              <Form ref="formInline" :model="obj" :label-width="90">
                <FormItem label="角色名称：">
                  <Input v-model="obj.name" placeholder="角色名称" class="wid"></Input>
                </FormItem>
                <FormItem label="英文名称：">
                  <Input v-model="obj.enname" placeholder="英文名称" class="wid"></Input>
                </FormItem>
                <FormItem label="所属系统：">
                  <RadioGroup  v-model="obj.limit_system" @on-change="systemChange">
                    <Radio  v-for="(item,index) in limitSystemList"  :key="index" :label="item.value" border  style="margin-bottom: 1%">{{item.label}}</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="角色：" v-if="roleShow">
                  <CheckboxGroup v-model="obj.roleList">
                    <Checkbox v-for="(item,index) in roleList"  :key="index" :label="item.id" border  style="margin-bottom: 1%">{{item.name}}</Checkbox>
                  </CheckboxGroup>
                </FormItem>
                <FormItem label="备注：">
                  <Input v-model="obj.remarks" type="textarea"  placeholder="备注" class="wid"></Input>
                </FormItem>
              </Form>
              <div align="right">
                <Button class="clic" type="primary" shape="circle" @click="addRoleGroup">添加</Button>
                <Button class="ml20" shape="circle" @click="changType('1')">取消</Button>
              </div>
            </div>
          </TabPane>
        </template>
        <template v-if="type === '2'">
          <TabPane label="角色组修改"  name="name3">
            <div class="user-form">
              <Form ref="formInline" :model="groupObj" :label-width="90">
                <FormItem label="角色名称：">
                  <Input v-model="groupObj.name" placeholder="角色名称" class="wid"></Input>
                </FormItem>
                <FormItem label="英文名称：">
                  <Input v-model="groupObj.enname" placeholder="英文名称" class="wid"></Input>
                </FormItem>
                <FormItem label="所属系统：">
                  <RadioGroup  v-model="groupObj.limit_system" @on-change="systemChange">
                    <Radio  v-for="(item,index) in limitSystemList"  :key="index" :label="item.value" border  style="margin-bottom: 1%">{{item.label}}</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="角色：">
                  <CheckboxGroup v-model="groupObj.roleList">
                    <Checkbox v-for="(item,index) in roleList"  :key="index" :label="item.id" border  style="margin-bottom: 1%">{{item.name}}</Checkbox>
                  </CheckboxGroup>
                </FormItem>
                <FormItem label="备注：">
                  <Input v-model="groupObj.remarks" type="textarea"  placeholder="备注" class="wid"></Input>
                </FormItem>
              </Form>
              <div align="right">
                <Button class="clic" type="primary" shape="circle" @click="editRoleGroupOk">保存</Button>
                <Button class="ml20" shape="circle" @click="changType('1')" >取消</Button>
              </div>
            </div>
          </TabPane>
        </template>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import { getRoleGroupPageList, getSystemRoleList, getAddRoleGroup, getUpdateRoleGroup, getDelRoleGroup } from '@/api/eventlist'
import { getDictList } from '@/api/common'

export default {
  data () {
    return {
      type: '1',
      tabName: '',
      groupObj: {},
      roleList: [],
      limitSystemList: [],
      row: {},
      userRoleGroupList: [],
      groupList: [],
      userObj: {},
      tableLoading: false,
      configPower: false,
      btnlist: [],
      spanList: [],
      obj: {},
      data: [],
      columns: [
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '英文名称',
          key: 'enname',
          align: 'center'
        },
        {
          title: '所属系统',
          key: 'limit_system',
          align: 'center'
        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ],
      currentPageNo: 1,
      currentPageSize: 20,
      totalnum: 0,
      selectObj: {},
      roleShow: false
    }
  },
  mounted () {
    this.init()
    this.getDicInfo()
    // this.initSystemRoleList()
  },
  methods: {
    init () {
      let params = {
        name: this.selectObj.name,
        enname: this.selectObj.enname,
        pageSize: this.currentPageSize
      }
      this.tableLoading = true
      getRoleGroupPageList(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data.results
          this.totalnum = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    initSystemRoleList (params) {
      console.log('111')
      this.roleList = []
      getSystemRoleList(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.roleList = ret.data.data
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    systemChange (system) {
      this.roleShow = true
      console.log(system)
      // this.groupObj = this.row
      this.initSystemRoleList({ limit_system: system })
      console.log(this.groupObj, 'llllll')
    },
    tabsOnClick (name) {
      console.log(name)
      switch (name) {
        case 'name1':
          this.type = '1'
          // this.initGroupList()
          break
        case 'name2':
          this.roleShow = false
          // this.initGroupList()
          break
        default:
          break
      }
    },
    changType (type) {
      this.type = type
      if (type === '1') {
        this.tabName = 'name1'
      } else if (type === '2') {
        this.tabName = 'name3'
      }
    },
    addRoleGroup () {
      getAddRoleGroup(this.obj).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '添加成功',
            desc: ret.data.data.message
          })
          this.obj = {}
          this.init()
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    editRoleGroup (row) {
      this.initSystemRoleList({ limit_system: row.limit_system })
      this.row = row
      this.groupObj = row
      this.tabName = 'name3'
      this.type = '2'
    },
    editRoleGroupOk () {
      getUpdateRoleGroup(this.groupObj).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '修改成功',
            desc: ret.data.data.message
          })
          this.init()
          this.changType('1')
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    delRoleGroup (row) {
      getDelRoleGroup(row).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '删除成功',
            desc: ret.data.data.message
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 获取字典数据
    getDicInfo () {
      getDictList({ 'type': 'limit_system_dict' }).then(ret => {
        if (ret.data.errcode === 0) {
          this.limitSystemList = ret.data.data.results
          console.log(this.limitSystemList, '字典')
        } else {
          this.$Notice.error({ title: '获取字典列表失败', desc: '' })
        }
      })
    },
    //  分页
    change (pageNo) {
      this.currentPageNo = pageNo
      this.currentPageSize = 20
    }
  },
  watch: {}
}
</script>

<style scoped>
.user-form {
  width: 70%;
  margin: 0 auto;
}
.flx {
  display: flex;
}
.wid {
  width: 90%;
}
.page {
  margin-top: 10px;
  text-align: right;
}
.drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.drawer-body {
  height: 90%;
  overflow: auto;
}

</style>
